import defaultSettings from "@/settings";
export const useSettingsStore = defineStore("settings", () => {
	const theme = useStorage("theme", defaultSettings.theme);
	const themeColor = useStorage("themeColor", defaultSettings.themeColor);
	const fixedHeader = useStorage<boolean>(
		"fixedHeader",
		defaultSettings.fixedHeader
	);
	const tagsView = useStorage("tagsView", defaultSettings.tagsView);

	const showSettings = ref(defaultSettings.showSettings);
	const sidebarLogo = ref(defaultSettings.sidebarLogo);

	const settingsMap = {
		theme,
		themeColor,
		fixedHeader,
		tagsView,
		showSettings,
		sidebarLogo
	};
	/**
	 * @description:修改setting
	 * @template {keyof typeof settingsMap} T
	 * @template {(typeof settingsMap)[keyof typeof settingsMap]["value"]} V
	 * @param {T} key
	 * @param {V} value
	 */
	const changeSetting = (
		key: keyof typeof settingsMap,
		value: (typeof settingsMap)[keyof typeof settingsMap]["value"]
	) => {
		const setting = settingsMap[key];

		if (setting) {
			setting.value = value;
			console.log(key);

			if (key === "theme") {
				if (value === "dark") {
					document.documentElement.classList.add("dark");
				} else {
					document.documentElement.classList.remove("dark");
				}
			}
		}
	};

	return {
		theme,
		themeColor,
		fixedHeader,
		tagsView,
		showSettings,
		sidebarLogo,
		changeSetting
	};
});
